<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap</title>
  <link href="../lib/css/bootstrap.min.css" rel="stylesheet">

</head>
<body>
<div class="container">
  <h1>表格</h1>
  <!--通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。-->
  <!--添加 .table-bordered 类为表格和其中的每个单元格增加边框-->
  <!--通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。-->
  <!--通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。-->
  <!--将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。-->
  <div class="table-responsive">
    <table class="table table-striped table-bordered table-hover table-condensed">
      <thead>
      <tr class="success">
        <td>header</td>
        <td>header</td>
        <td>header</td>
      </tr>
      </thead>
      <tbody>
      <tr class="info">
        <td>11</td>
        <td>22</td>
        <td>33</td>
      </tr>
      <tr class="warning">
        <td class="danger">11</td>
        <td>22</td>
        <td>33</td>
      </tr>
      </tbody>
    </table>
  </div>
</div>
<script src="../lib/jquery.min.js"></script>
<script src="../lib/bootstrap.min.js"></script>
</body>
</html>